<template>
  <div>
    <basic-container>

    <!--    {{ test }}-->
<!--    <avue-form :option="uploadOption" v-model="form"> </avue-form>-->
    <el-container>
      <el-aside width="200px">
        <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"></avue-tree>
      </el-aside>
      <el-main>
        <avue-crud ref="crud"
                   :page.sync="page"
                   :data="tableData"
                   :table-loading="tableLoading"
                   :option="tableOption"
                   @on-load="getList"
                   @refresh-change="refreshChange"
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   @row-update="handleUpdate"
                   @row-save="handleSave"
                   @row-del="rowDel">
        </avue-crud>
      </el-main>
    </el-container>
    </basic-container>
  </div>
</template>

<script>
import {uploadFile} from "@/api/upload";
import {fetchCidTree} from "@/api/category";
import request from "@/router/axios";
import {addObj, delObj, putObj} from "@/api/brand";

export default {
  name: "index",
  data() {
    return {
      test: '测试1111',
      catId: 0,
      tableLoading: false,
      searchForm: {},
      currentKey: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      uploadOption: {
        labelWidth: 120,
        column: [
          {
            label: '阿里上传',
            prop: 'imgUrl',
            type: 'upload',
            listType: 'picture-img',
            canvasOption: {
              text: 'avue',
              ratio: 0.1
            },
            oss: 'ali',
            loadText: '附件上传中，请稍等',
            span: 24,
            tip: '只能上传jpg/png文件，且不超过500kb',
          }
        ]
      },
      obj: {},
      treeData:[],
      treeOption:{
        accordion: true,
        defaultExpandAll: false,
        formOption:{
          labelWidth:100,
          column:[{
            label:'自定义项',
            prop:'test'
          }],
        },
        props:{
          labelText:'标题',
          label:'label',
          value:'value',
          children:'children'
        }
      },
      tableData:[],
      tableOption: {
        excelBtn: true,
        printBtn: true,
        searchBtn: true,
        border: true,
        stripe: true,
        column: [
          {
            label: 'ID',
            prop: 'attrGroupId',
            addDisabled: true,
            addDisplay: false,
            editDisabled: true
          },
          {
            label: '组名',
            prop: 'attrGroupName'
          },
          {
            label: '排序',
            prop: 'sort'
          },
          {
            label: '描述',
            prop: 'descript'
          },
          {
            label: '组图标',
            prop: 'icon'
          },
          {
            type: 'tree',
            label: '所属分类id',
            prop: 'catelogId',
            dicData: [],
            value: '0'
          }
        ]
      }
    }
  },
  created() {
    const array = [ ['黑色', '白色', '蓝色'], ['1.2KG', '2.0KG', '3.0KG'], [1], [2] ];
    const descartes = this.descartes(array);
    console.log(descartes);
    this.testUpload();
    uploadFile();
    fetchCidTree(3).then(res=>{
      this.treeData = res.data.data;
      this.tableOption.column[4].dicData = res.data.data;
    });
    this.tableData = [];
    request({
      url: '/product/attr/base/all/225',
      method: 'get'
    })
  },
  methods: {
    getList(page) {
      this.tableLoading = true
      const catId = this.catId
      request({
        url: `/product/attrgroup/list/${catId}`,
        method: 'get',
        params: Object.assign({
          current: page.currentPage,
          size: page.pageSize,
        })
      }).then(response => {
        this.tableData = response.data.data.list;
        this.page.total = response.data.data.totalCount
        if (response.data.data.totalCount === 0) {
          this.$message.warning('当前分类下无数据！');
        }
      }).catch(error=> {
        this.$message.error(error);
        this.tableData = [];
        this.page.total = 0;
      }).finally(() => {
        this.tableLoading = false
      });
    },
    testUpload() {
      uploadFile().then(response => {
        console.log(response);
        this.test = response.data;
      });
    },
    nodeClick(data){
      if (data.level === 3) {
        this.catId = data.value;
        this.getList(this.page);
      }
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    refreshChange() {
      this.getList(this.page)
    },
    handleUpdate: function (row, index, done, loading) {
      putObj(row).then(data => {
        this.$message.success('修改成功')
        done()
        this.getList(this.page)
      }).catch(() => {
        loading();
      });
    },
    handleSave(row, done, loading) {
      return request({
        url: '/product/attrgroup',
        method: 'post',
        data: row
      }).then(data => {
        this.$message.success('添加成功')
        done()
        this.getList(this.page)
      }).catch(() => {
        loading();
      });
    },
    rowDel: function (row, index) {
      this.$confirm('是否确认删除【' + row.attrGroupName +'】', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.attrGroupId)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    search() {

    },
    /**
     * 生成笛卡尔积
     * @param array
     * @returns {*|*[]}
     */
    descartes(array) {
      if (array.length < 2) {
        return array[0] || [];
      }
      return [].reduce.call(array, function(col, set) {
        const res = [];
        col.forEach(function(c) {
          set.forEach(function(s) {
            const t = [].concat(Array.isArray(c) ? c : [c]);
            t.push(s);
            res.push(t);
          })});
        return res;
      });
    }
  }
}
</script>

<style scoped>

</style>
